<template>
  <div style="padding: 20px" id="order">
    <!--  @tab-click="handleClick"-->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="所有订单" name="allOrder">
        <allOrder v-if="pages.allOrder"></allOrder>
      </el-tab-pane>
      <el-tab-pane label="待支付" name="unpaid">
        <unpaid v-if="pages.unpaid"></unpaid>
      </el-tab-pane>
      <el-tab-pane label="待派单" name="stayAway">
        <stayAway v-if="pages.stayAway"></stayAway>
      </el-tab-pane>
      <el-tab-pane label="待接单" name="wangtingList">
        <wangtingList v-if="pages.wangtingList"></wangtingList>
      </el-tab-pane>
      <el-tab-pane label="待服务" name="wangtingService">
        <wangtingService v-if="pages.wangtingService"></wangtingService>
      </el-tab-pane>
      <el-tab-pane label="待确认" name="unCheck">
        <unCheck v-if="pages.unCheck"></unCheck>
      </el-tab-pane>
      <el-tab-pane label="已完成" name="finish">
        <finish v-if="pages.finish"></finish>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import allOrder from "./components/allOrder";
import unpaid from "./components/unpaid";
import wangtingList from "./components/wangtingList";
import wangtingService from "./components/wangtingService";
import unCheck from "./components/unCheck";
import finish from "./components/finish";
import stayAway from "./components/stayAway";
export default {
  data() {
    return {
      activeName: "allOrder",
      pages: {
        allOrder: true,
        unpaid: false,
        wangtingList: false,
        wangtingService: false,
        unCheck: false,
        finish: false,
        stayAway: false,
      },
    };
  },
  methods: {
    //每次切换只渲染一个界面
    handleClick(tab) {
      for (var i in this.pages) {
        console.log(i);
        if (tab.name != i) {
          this.pages[i] = false;
          //   console.log(this.pages[i]);
        } else {
          this.pages[i] = true;
        }
      }
    },
  },
  components: {
    allOrder,
    unpaid,
    wangtingList,
    wangtingService,
    unCheck,
    finish,
    stayAway,
  },
};
</script>